<!-- <template>
	<div>
		<el-card>
			<el-row
				:gutter="20"
				style="
					padding-bottom: 16px;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
				"
			>
				<el-col :span="7">
					<el-input
						placeholder="输入用户账号以查询"
						v-model="userIdForSearch"
						style="height: 34px"
					></el-input>
				</el-col>
				<el-button
					type="primary"
					:icon="Search"
					@click="searchByUserName(userIdForSearch)"
				>
					搜索
				</el-button>
				<el-button type="primary" @click="addUser">
					添加用户
				</el-button>
			</el-row>

			<el-table
				:data="tableData"
				stripe
				style="width: 100%"
				@form-submitted="handleFormSubmit"
			>
				<el-table-column
					v-for="(item, index) in options"
					:key="index"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
				>
					<template
						v-if="item.prop == 'actions'"
						#default="{ row }"
					>
						<el-button
							type="primary"
							size="small"
							@click="update(row)"
						>
							修改信息
						</el-button>
						<el-button
							type="warning"
							size="small"
							@click="deleteUser(row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				layout="prev, pager, next,jumper, ->, total"
				:total="tableData.length"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-size="pageSize"
				style="text-align: center"
			/>
		</el-card>
		<addDialogue v-model="addDialogVisible"></addDialogue>
		<updateDialogue v-model="updateDialogVisible"></updateDialogue>
	</div>
</template>

<script setup lang="ts">
import addDialogue from '@/components/dialogue/addDialogue.vue'
import updateDialogue from '@/components/dialogue/updateDialogue.vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { options } from '@/views/alc/manage/options'
import { onMounted, ref, Ref } from 'vue'
import {
	reqGetUserList,
	reqDelete,
	reqAddUser,
	reqGetUserByUserId
} from '@/api/user/userInfo'
import type { UserInfo } from '@/api/user/userInfo'
import $bus from '@/bus'

const userIdForSearch = ref('')
const addDialogVisible = ref(false)
const currentPage = ref(0)
const pageSize = ref(4)
const updateDialogVisible = ref(false)

const tableData: Ref<UserInfo[]> = ref([])
const initGetUserList = async (PageNum: number, PageSize: number) => {
	const res = await reqGetUserList(PageNum, PageSize)
	tableData.value = res
	//过滤已删除的用户（isDeleted=1）
	tableData.value = filteredTableData()
}
//过滤已删除的用户的函数
function filteredTableData() {
	return tableData.value.filter(user => !user.isDeleted)
}
onMounted(() => {
	initGetUserList(1, 100)
})

//处理分页器翻页
function handleCurrentChange(_currentPage: any) {
	currentPage.value = _currentPage //每次点击分页按钮，当前页发生变化
	// console.log(this.currentPage);
}

//搜索用户
async function searchByUserName(userName: string) {
	if (userName) {
		const res = await reqGetUserByUserId(userName)
		if (res != '') {
			tableData.value = []
			tableData.value.push(res)
		} else {
			ElMessage({
				message: '未找到该用户',
				type: 'warning'
			})
		}
	} else {
		initGetUserList(1, 200)
	}
}
//修改用户信息
const sendInfoToUpdate = (row: UserInfo) => {
	$bus.emit('sendUserInfo', { row })
}
const update = (row: any) => {
	updateDialogVisible.value = true
	sendInfoToUpdate(row)
}

// 添加用户
const addUser = () => {
	addDialogVisible.value = true
}
const handleFormSubmit = (form: UserInfo) => {
	console.log(form)
	tableData.value.push(form)
	const res = reqAddUser(form)
	console.log(res)
}
// 删除用户
const deleteUser = (row: any) => {
	ElMessageBox.confirm('你确认要删除该信息吗?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		await reqDelete(row.id)
		ElMessage({
			message: '删除成功'
		})
	})
	initGetUserList(1, 100)
}
</script>

<style scoped>
.header {
	margin-bottom: 20px;
	box-sizing: border-box;
}
</style> -->
<template>
<div>
111
</div>
</template>

<script setup lang='ts'>

</script>

<style scoped>
</style>